<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.0</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"
    />
    <link rel="shortcut icon" href="/static/admin/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="/static/admin/css/font.css">
    <link rel="stylesheet" href="/static/admin/css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="/static/admin/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/static/admin/js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
    <div class="x-body">
        <form action="/admin/brand/save" class="layui-form" method="POST" enctype="multipart/form-data">
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>选择类目
                </label>
                <div class="layui-input-inline">
                    <select name="type1_id" lay-filter="type1_id">
                        <option value="">选择一级分类</option>
                        {volist name='data' id='vo'}
                        <option value="{$vo.id}">{$vo.name}</option>
                        {/volist}
                    </select>
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red">*</span>品牌所属一级类目
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>选择类目
                </label>
                <div class="layui-input-inline">
                    <select name="type2_id" id="type2_id" lay-filter="type2_id">
                        <option value="">选择二级分类</option>
                    </select>
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red">*</span>品牌所属二级类目
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>选择类目
                </label>
                <div class="layui-input-inline" lay-filter="type3_id">
                    <select name="type3_id" lay-verify="required" id="type3_id">
                        <option value="">选择三级分类</option>
                    </select>
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red">*</span>品牌叶子类目
                </div>
            </div>
            <div class="layui-form-item">
                <label for="username" class="layui-form-label">
                    <span class="x-red">*</span>品牌名
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="brand_name" name="brand_name" required="" lay-verify="required" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red">*</span>品牌名称
                </div>
            </div>
            <div class="layui-form-item">
                <label for="logo" class="layui-form-label">
                    <span class="x-red">*</span>logo
                </label>
                <div class="layui-input-inline">
                    <p class="layui-upload">
                        <button type="button" class="layui-btn layui-btn-normal" id="choose">
                            <i class="layui-icon">&#xe67c;</i>选择文件
                        </button>
                        <p class="layui-upload-list">
                            <!--预览图片-->
                            <img class="layui-upload-img" width="200" height="100" id="demo1">
                            <!--提示上传信息-->
                            <p id="demoText"></p>
                        </p>
                    </p>
                </div>

                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red">*</span>品牌logo
                </div>
            </div>
            <div class="layui-form-item">
                <label for="L_repass" class="layui-form-label">
                </label>
                <button class="layui-btn layui-btn-danger" lay-filter="add"  id="sub_btn">
                    添加品牌
                </button>
            </div>
        </form>
    </div>
    <script>

        layui.use('form', function () {
            var form = layui.form;

            //各种基于事件的操作，下面会有进一步介绍

            form.on('select(type1_id)', function (data) {
                console.log(data)
                console.log(data.value); //得到被选中的值
                var id = data.value;
                $("#type3_id").html('');
                if (id != "") {
                    $.ajax({
                        type: "GET",
                        url: "/admin/goods/ajax_get_type?id=" + id,
                        dataType: "json",
                        success: function (data) {
                            console.log(data);
                            var str = "";
                            for (var i = 0; i < data.length; i++) {
                                str += '<option value="' + data[i].id + '">' + data[i].name + '</option>';
                            }
                            // 把拼好的 option 放到第二个下拉框中
                            $("#type2_id").html(str);

                            form.render('select');
                            form.on('select(type2_id)', function (data) {
                                console.log(data.value);
                                var id = data.value;
                                if (id != "") {
                                    $.ajax({
                                        type: "GET",
                                        url: "/admin/goods/ajax_get_type?id=" + id,
                                        dataType: "json",
                                        success: function (data) {
                                            console.log(data);
                                            var str = "";
                                            for (var i = 0; i < data.length; i++) {
                                                str += '<option value="' + data[i].id + '">' + data[i].name + '</option>';
                                            }
                                            // 把拼好的 option 放到第三个下拉框中
                                            $("#type3_id").html(str);
                                            form.render();
                                        }
                                    });
                                }

                            });
                        }
                    });
                }

            });

            form.on('select(type2_id)', function (data) {
                console.log(data.value);
                var id = data.value;
                if (id != "") {
                    $.ajax({
                        type: "GET",
                        url: "/admin/goods/ajax_get_type?id=" + id,
                        dataType: "json",
                        success: function (data) {
                            console.log(data);
                            var str = "";
                            for (var i = 0; i < data.length; i++) {
                                str += '<option value="' + data[i].id + '">' + data[i].name + '</option>';
                            }
                            // 把拼好的 option 放到第三个下拉框中
                            $("#type3_id").html(str);
                            form.render();
                        }
                    });
                }

            });

        });


    </script>
    <script>
        {if session('status')!=null}
            alert('添加成功');
            parent.location.href = '/admin/brand/index';
        {/if}
        layui.use('upload', function () {
            var upload = layui.upload;
            var uploadInst = upload.render({
                elem: '#choose'
                , url: '/admin/brand/save'
                , auto: false //选择文件后不自动上传
                , bindAction: '#sub_btn' //指向一个按钮触发上传
                , choose: function (obj) {

                    var files = obj.pushFile();
                    //预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
                    obj.preview(function (index, file, result) {
                        $('#demo1').attr('src', result);

                        delete files[index]; //删除列表中对应的文件，一般在某个事件中使用
                    });
                }
            });

        });
    </script>

    <script>
        layui.use(['form', 'layer'], function () {
            $ = layui.jquery;
            var form = layui.form
                , layer = layui.layer;

            //自定义验证规则
            form.verify({
                nikename: function (value) {
                    if (value.length < 5) {
                        return '昵称至少得5个字符啊';
                    }
                }
                , pass: [/(.+){6,12}$/, '密码必须6到12位']
                , repass: function (value) {
                    if ($('#L_pass').val() != $('#L_repass').val()) {
                        return '两次密码不一致';
                    }
                }
            });

            //监听提交
            form.on('submit(add)', function (data) {
                console.log(data);
                //发异步，把数据提交给php
                layer.alert("增加成功", { icon: 6 }, function () {
                    // 获得frame索引
                    var index = parent.layer.getFrameIndex(window.name);
                    //关闭当前frame
                    parent.layer.close(index);
                });
                return false;
            });


        });
    </script>
    <script>var _hmt = _hmt || []; (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();</script>
</body>

</html>